<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>作业</title>
  <style>
	*{
		margin:0;
		padding:0;
		list-style:none;
	}
	.clear{
		clear:both;
	}
	.fl{
		float:left;
	}
	a{
		text-decoration:none;
	}
	a:hover .a{
		color:red;
	}
	a:hover .b{
		color:red;
	}
	.w{
		background:gray;
		width:1200px;
		height:500px;
		margin:0 auto;
		text-align:center;
		font-size:14px;
		line-height:22px;
	}
	.test-a{
		margin:0 auto;
		width:248px;
	}
	.a{
		color:black;
	}
	.a1{
		width:62px;
		height:22px;
		background:url("img/bg.gif");
		background-position:0px -22px;
	}
	.a2{
		width:62px;
		height:22px;
		background:url("img/bg.gif");
		background-position:-62px 0px;
	}
	.a3{
		width:62px;
		height:22px;
		background:url("img/bg.gif");
		background-position:-124px 0px;
	}
	.a4{
		width:62px;
		height:22px;
		background:url("img/bg.gif");
		background-position:-186px 0px;
	}





	.top-b{
		width:1170px;
		height:36px;
		background:#0099ff;
		position:relative;
		padding:30px 0 0 30px;
	}
	.b{
		margin-right:20px;
		margin-bottom:0;
		border-radius:3px 3px 0 0;
		height:36px;
		line-height:36px;
		color:white;
	}
	.b1{
		width:62px;
		background:url("img/tableright.gif");
		float:left;
	}
	.b2{
		width:126px;
		background:url("img/tableright.gif");
		float:left;
	}
	.b3{
		width:62px;
		background:url("img/tableright.gif");
		float:left;
	}
	.b4{
		width:99px;
		background:url("img/tableright.gif");
		float:left;
	}
	.b5{
		width:62px;
		background:url("img/tableright.gif");
		float:left;
	}
	.bottom-b{
		width:1200px;
		height:10px;
		background:white;
	}


	.test-c{
		height:100px;
		background:#fff3c7;
		margin-top:30px;
	}
	.test-c ul li{
		float:left;	
		width:90px;
		height:27px;
		line-height:27px;
		background:url("img/left.gif");
		margin-right:2px;
		padding-left:13px;
		position:relative;
	}
	
	.test-c ul li a{
		color:black;
	}
	.test-c ul li a:hover{
		color:red;
	}
	.test-c ul li span{
		float:right;	
		width:15px;
		height:27px;
		background:url("img/right.gif");
	}
	.test-c ul li:nth-child(1),.test-c ul li:nth-child(1) span{
		background-position:0px -27px;
	}
	.test-c ul li:nth-child(4),.test-c ul li:nth-child(4) span{
		background-position:0px -117px;
	}
	
	.test-c ul li img{
		position:absolute;
		top:-15px;
		right:-35px;
	}




	.top-d{
		width:717px;
		height:27px;
		background:url("img/header.jpg") no-repeat;
		margin:0 auto;
		padding-top:150px;
		position:relative;
	}
	.top-d h1{
		float:left;
		margin-top:-151px;
	}
	.bottom-d1{
		width:693px;
		height:27px;
		background:url("img/Navigation.gif") no-repeat;
		background-position:0px -54px;
		margin-left:23px;
	}
	.bottom-d2{
		width:629px;
		height:27px;
		background:url("img/Navigation.gif") no-repeat;
		background-position:-65px 0px;
		position:absolute;
		bottom:0px;
		right:0px;
	}
  </style>
 </head>
 <body>
 <div class="w">
	<div class="test-a">
		<a href="#"><div class="a1 a fl">首页</div></a>
		<a href="#"><div class="a2 a fl">新闻</div></a>
		<a href="#"><div class="a3 a fl">娱乐</div></a>
		<a href="#"><div class="a4 a fl">体育</div></a>
	</div>
	<div class="clear"></div>
	<div class="test-b">
		<div class="top-b">
			<a href="#"><div class="b1 b fl">首页</div></a>
			<a href="#"><div class="b2 b fl">首页首页首页</div></a>
			<a href="#"><div class="b3 b fl">首页</div></a>
			<a href="#"><div class="b4 b fl">首页首页首</div></a>
			<a href="#"><div class="b3 b fl">首页</div></a>
		</div>
		<div class="bottom-b"></div>
	</div>
	<div class="clear"></div>
	<div class="test-c">
		<ul>
			<li><a href="#">首页<span></span></a></li>
			<li><a href="#">数码通讯<span></span></a></li>
			<li><a href="#">房产<span></span></a></li>
			<li><a href="#">汽车<span></span></a></li>
			<li><a href="#">运动<span></span></a></li>
			<li><a href="#">游戏<span></span></a></li>
			<li><a href="#">书籍游戏<span></span></a></li>
			<li><a href="#">家居<span></span></a></li>
			<li><a href="#">香港街<span></span></a></li>
			<li><a href="#">淘宝商城<span></span>
			<img src="img/new.gif"></a></li>
		</ul>
	</div>
	<div class="clear"></div>
	<div class="test-d">
		<div class="top-d"><h1>home</h1>
		<div class="bottom-d1"></div>
		<div class="bottom-d2"></div>
		</div>
	</div>
</div>
 </body>
</html>
